範本是Vue框架中的重要組成部分，採用了基於HTML的範本語法。範本功能方便開發者將專案小元件化、封裝訂製化的萬用元件。
範本最直接的用途是幫助我們透過資料夾來驅動視圖的著色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>範本插值</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application" style="text-align: center;">
<h1>範本的內容：{{ count }} 次點擊</h1>
<button v-on:click="clickButton">按鈕</button>
</div>
<script>
// 定義一個 Vue 元件，名為 App
const App = {
// 定義元件中的資料
data() {
return {
// 目前只用到 count 資料
count: 0
};
},
// 定義元件中的函數
methods: {
// 實現點擊按鈕的方法
clickButton() {
this.count = this.count + 1;
}
}
};
// 將 Vue 元件綁定到頁面上 id 為 Application 的元素上
Vue.createApp(App).mount("#Application");
</script>
</body>
</html>
<h1 v-once>範本內容：{{count}}次點擊</h1>
<h1 v-once>範本內容：<span v-html="countHTML"></span>次點擊</h1>
<h1 v-bind:"id1">範本內容：{{count + 10}}次點擊</h1>
以上是今天Vue中範本插值的內容，明天將要介紹範本指令！
iThome鐵人賽
看影片追技術